<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/flexible_css.debug.js"></script>
    <script src="../js/flexible.debug.js"></script>
    <link rel="stylesheet" href="../css/shouye.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
</head>

<body>
    <header class="header">
        <div class="left">
            <span type="button" class="btn " data-toggle="modal" data-target=".bs-example-modal-lg"><img src='../imgs/11.png'></span>
        </div>
        <div class="center"></div>
        <div class="right"><img src='../imgs/12.png'></div>
    </header>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src='../imgs/10.png' width="100%">
                <p class="p1">公司/昨天 17:57</p>
                <p class="p2">从无印良品到网易严选和米家，如何优雅的完成“消费降级”</p>
            </div>
            <div class="swiper-slide"><img src='../imgs/10.png' width="100%">
                <p class="p1">公司/昨天 17:57</p>
                <p class="p2">从无印良品到网易严选和米家，如何优雅的完成“消费降级”</p>
            </div>
            <div class="swiper-slide"><img src='../imgs/10.png' width="100%">
                <p class="p1">公司/昨天 17:57</p>
                <p class="p2">从无印良品到网易严选和米家，如何优雅的完成“消费降级”</p>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <section class="set">
        <img src="../imgs/4.png">
    </section>
    <div class="lsmin">

    </div>
    <div class="zhuanquan"><img src="../imgs/quan.png" class="xuanzhuan"/>加载中…</div>
    <section class="gdlm-gdlm">
        <div class="gd-header">
            <div class="header-left">
            </div>
            <div class="header-center">
                <span>更多栏目</span>
            </div>
            <div class="header-right">
            </div>
        </div>
        <figure>
            <img src="../imgs/gdlm-more.png">
        </figure>
        <ul>
            <li><a><img src="../imgs/gdlm-xiaocx.png"></a></li>
            <li><a><img src="../imgs/gdlm-ship.png"></a></li>
            <li><a><img src="../imgs/gdlm-zaob.png"></a></li>
            <li><a><img src="../imgs/gdlm-das.png"></a></li>
            <li><a href="dushu.html"><img src="../imgs/gdlm-shud.png"></a></li>
            <li><a><img src="../imgs/gdlm-pingc.png"></a></li>
            <li><a><img src="../imgs/gdlm-chanp.png"></a></li>
            <li><a><img src="../imgs/gdlm-qiche.png"></a></li>
            <li><a><img src="../imgs/gdlm-shangy.png"></a></li>
            <li><a><img src="../imgs/gdlm-renw.png"></a></li>
            <li><a><img src="../imgs/gdlm-xinc.png"></a></li>
            <li><a><img src="../imgs/gdlm-shengh.png"></a></li>
        </ul>
    </section>
    <div class="fx-zhe"></div>
    <!--    <a href=""></a>-->
    <script type="text/html" id="products-temp">
        {{each lie as v}}
        <a href="{{v._href}}">
            <section class="techu">
                <div class="imgs">
                    <img src="{{v.logoImg}}" width="96%">
                </div>

                <div class="shijian">
                    <span class="span">{{v.diZ}}</span>
                    <span class="span1">{{v.shiJ}}</span>
                    <span class="span2">
            <img src='../imgs/6.png'>
            <span>0</span>
                    </span>
                </div>
                <div class="ipone">
                    <p class="p_one">{{v.P_one}}</p>
                    <p class="p_one">{{v.p_two}}</p>
                    <p class="p_two">{{v.P_three}}</p>
                    <p class="p_there"><img src='{{v.pImg}}'></p>
                </div>
            </section>
        </a>
        {{/each}}
    </script>
    <script type="text/html"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/swiper.min.js"></script>
    <script src="../js/artTemplate.js"></script>
    <script src="../js/dropload.js"></script>
    <script>
        $(function() {
            $(".header .left").on("click", function() {
                $('.gdlm-gdlm').fadeIn();
                $(".fx-zhe").fadeIn();
                $(this).hide();
                $(".header .right").hide();
            })
            $(".header .right").on("click", function() {
                location.href = "msdl.html"
            })
            $("body").on('click',".fx-zhe",function(){
                $('.gdlm-gdlm').fadeOut();
                $(".fx-zhe").fadeOut();
                $(".header .left").show();
                $(".header .right").show();
            })
            $('body').on('cilck',".lsmin",function(){
                location.href = "suoni.html"
            })
        })
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            paginationBulletRender: function(swiper, index, className) {
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            }
        });
        $(function() {
            // 页数
            var page = 0;
            // 每页展示5个
            var size = 5;

            $('.lsmin').dropload({
                scrollArea: window,
                threshold: 50, //距离底部50的时候刷新
                loadDownFn: function(me) {
                    //console.log(me);
                    page++;
                    $.ajax({
                        type: "get",
                        url: "../json/shouye.json",
                        dataType: "json",
                        success: function(data) {
                            setTimeout(function() {
                                // 插入数据到页面，放到最后面
                                data = data.slice(0, 2); //截取data数据
                                var str = template("products-temp", {
                                    lie: data
                                });
                                $(".lsmin").append(str); //渲染到页面
                                // 每次数据插入，必须重置
                                me.resetload();
                            }, 1000);
                        },
                        error: function(xhr, type) {
                            //alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                }
            });
        });

    </script>
</body>

</html>
